<template>
	<view :style="{'height':Height}" class="scroll_List" :class="[skeletonLoading?'scroll_wrap':'']">
		<scroll-view class="my_scroll"
		refresher-enabled="true"
		@refresherrefresh="onRefresh"
		@scrolltolower="scrolltolower"
		refresher-background="#efefef"
		refresher-default-style="none"
		scroll-y="true"
		:refresher-triggered="triggered">
			<!-- 下拉刷新提示 -->
			<template #refresher>
				<view class="loading pullLoading">
					<u-loading-icon text="加载中"></u-loading-icon>
				</view>
			</template>
			<u-skeleton rows="5" title :loading="skeletonLoading">
				<template v-if="scrollList.length>0">
					<!-- 内容插槽 contentScrollList传递参数 -->
					<slot name="ScrollMyList" :contentScrollList="scrollList"></slot>
					<!-- 暂无更多内容！ -->
					<view class="NoMoreContent">已经没有更多数据啦~</view>
				</template>
			</u-skeleton>
			<!-- 空数据 -->
			<view class="emptyData" v-if="ifemptyData">
				<u-empty iconSize="100" textSize="16" mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
		</scroll-view>
		<view style="display:none">
		  <slot name="empty" />
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:"my-scroll-list",
		props:{
			requestUrl:{//请求路径
				type:String,
				require:true
			},
			requestType:{//请求方式
				type:String,
				default:'get'
			},
			requestParam:{//请求参数 
				type:Object,
				default(){
					return {}
				}
			},
			HearHeight:{//头部高度  px
				type:[Number,String],
				default:0,
			},
		},
		computed:{
			...mapState('m_user',['token'])
		},
		data() {
			return {
				timer:null,
				Height:0,
				triggered:true,//是否处于下拉刷新状态 true-是 false-否
				scrollList:[],//数据
				ListPaging:{
					total:0,//数据总数
					pageNum:1,//页数
					pageSize:10,//条数
					isloading: false,//节流
				},
				ifemptyData:false,//空数据图标是否显示 --默认不显示
				skeletonLoading:true,//骨架组件是否隐藏  --默认显示
			};
		},
		mounted(){
			this.getInfo()//设置高度
			if(this.requestUrl=='/yzyBusinessDistrict/list'){//商圈列表
				this.getListData()
			}
			// if(!getApp().globalData.ifImplementonShow){
			// 	this.getListData()
			// }
		},
		methods:{
			getInfo(){//获取设备信息 --设置高度
				let info=uni.getSystemInfoSync()
				this.Height=info.windowHeight - this.HearHeight + 'px'
			},
			ResetData(){//重置数据
				this.ListPaging.pageNum=1
				this.ListPaging.total=0
				this.scrollList=[]
				this.ifemptyData=false //防止搜索时返回的总条数为0，再次搜索时  ifemptyData还是为true导致空内容依然显示问题
			},
			onRefresh(){//下拉刷新
				this.triggered = true
				clearTimeout(this.timer)
				this.timer=setTimeout(()=>{
				   this.getListData(true,true) // 下拉刷新触发的事件
				},500)
			},
			scrolltolower(){//上拉触底
			    let num=this.ListPaging.pageSize*this.ListPaging.pageNum
				if(num>=this.ListPaging.total){
					// 证明没有下一页数据了
					return uni.$u.toast('数据加载完成！')
				}
				// 判断是否正在加载其他数据
                if (this.ListPaging.isloading) return
                // 页码值+1
				this.ListPaging.pageNum+=1
				this.getListData()//获取下一页数据
			},
			async getListData(Refresh=false,ifSearch=false,requestChildParam={},routeUrl=''){
				if(ifSearch){//判断是否是搜索，是的话就清空之前的数据，再次请求  保存数据刷新时  亦可是单纯用来清空数据
					this.ResetData()
				}
				this.ListPaging.isloading=true
				let params={
					pageSize:this.ListPaging.pageSize,
					pageNum:this.ListPaging.pageNum
				}
				let mergeParam=''
				if(this.requestType=='get'){
					mergeParam={params:{...params,...this.requestParam,...requestChildParam}}
				}else{
					mergeParam={...params,...this.requestParam,...requestChildParam}
				}
				//主要是页面的onshow生命周期 this.requestUrl为空 所以要传路径
				this.requestUrl=this.requestUrl?this.requestUrl:routeUrl
				const res=await uni.$u.http[this.requestType](this.requestUrl, mergeParam)
				if(res.code==0){
					if(res.total==0) this.ifemptyData=true//长度为0 空内容组件显示
					this.scrollList=[...this.scrollList,...res.rows]
					this.ListPaging.total=res.total//总条数
					this.skeletonLoading=false //骨架组件隐藏
					this.ListPaging.isloading=false
					if(Refresh) this.triggered = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.scroll_List{
	&.scroll_wrap{
		background:#fff;
	}
	.my_scroll{
		height:100%;
		white-space: nowrap;
		 /* loading */
		.loading {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			overflow: hidden;
			width: 100%;
			&.pullLoading{
				/* 这里是关键 */
				margin-top: -80upx;
			}
		}
		 /* 暂无更多内容 */
		.NoMoreContent{
			font-size:14px;
			color:#cdcdcd;
			text-align: center;
			padding-bottom:15rpx;
		}
		.emptyData{//空数据
			height:100%;
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>